<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框属性</title>
		<style>
			div{
			width: 50%;
			height: 200px;
			/* 边框复合性属性：属性值可以作为属性使用 */
			border: 1px solid red;
			/*效果：1像素实现红色边框
			  作用：①.展示效果  ②.确定元素是否选中
			  */
			 /* 边框宽度属性： 数值px*/
			 border-width:10px;
			 /* 边框宽度属性： 数值px*/
			 border-top-width: 8px;
			 border-left-width: 5px;
			 border-bottom-width: 8px;
			 /*边框样式属性 ： 实线、虚线、点线、双实线*/
			 border-style: double;
			 border-top-style: dashed;
			 border-bottom-style: dotted;
			 /*边框颜色属性：十六进制色值*/
			 border-color:#00f;
			 border-top-color:#33f563;
			 border-bottom-color:rgba(255,255,0,.5);
			 
			 /*复杂边框：边框倒角 border-radius 属性 */
			 /*复杂边框：边框倒角 border-radius 属性:1个属性值：顺时针 */
			 border-radius: 5px;
			 /*属性:2个属性值：顺时针 左上+右下 右上+左下 */
			 border-radius: 100px 5px;
			 /*属性:3个属性值：顺时针 左上 右上+左下 右下*/
			 border-radius: 0px 100px 5px;
			/*属性:4个属性值：顺时针 左上 右上 左下 右下*/
			border-radius: 0px 10px 100px 50px;
			}/*作业：圆+正三角形 
			思路1:宽高与边框倒角一致
			思路2div#d1css中:抓到div     【斜线】
			 左边框:50像素实线红色
			 右边框:50像素实线黄色
			 下边框:50像素交线黑色
			 transparent 透明色*/
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>